<template>
	<view class="calculator-page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="房租计算器"></CustomNav>
		<image :src="imgStorage+'/rent/calculator_bg.png '" class="home-bg" mode="widthFix"></image>
		<view class="info-block" :style="'margin-top:'+mt">
			<view class="title LENGKU">保证金费用明细</view>
			<view class="text">保障性住房保证金</view>
			<view class="info-content">
				<view class="info-item">
					<view class="info-title">廉租房</view>
					<view class="info-text">{{info.lowRent ? info.lowRent : '-'}}元</view>
				</view>
				<view class="info-item">
					<view class="info-title">公租房</view>
					<view class="info-text">{{info.publicRental ? info.publicRental : '-'}}元</view>
				</view>
				<view class="info-item">
					<view class="info-title">直管公房</view>
					<view class="info-text">{{info.straightPipe ? info.straightPipe : '-'}}元</view>
				</view>
			</view>
			<view class="price-block">
				<view class="price-name">缴费金额</view>
				<view class="price-item">
					<view class="price">-{{info.price ? info.price : '-'}}</view>
					<view class="unit">元</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDialog: false,
				info: {
					publicRental: 0,
					lowRent: 0,
					straightPipe: 0,
					price: 500
				}
			}
		},
		methods: {
			handleCallback(e) {
				this.isDialog = false
			}
		},
		onLoad(e) {
		    this.info = {
		        publicRental: e.publicRental !== undefined ? e.publicRental : '-',
		        price: e.price !== undefined ? e.price : '-',
		        lowRent: e.lowRent !== undefined ? e.lowRent : '-',
		        straightPipe: e.straightPipe !== undefined ? e.straightPipe : '-'
		    }
			console.log(this.info)
			console.log(e)
		},
	}
</script>

<style lang="scss" scoped>
	.calculator-page {
		overflow: hidden;
		opacity: 1;
		background: rgba(252, 63, 59, 0.9);

		.home-bg {
			width: 100%;
			position: absolute;
		}

		.info-block {
			padding: 30rpx;
			border-radius: 30rpx;
			position: relative;

			.title {
				margin-top: 60rpx;
				font-size: 50rpx;
				color: #fff;
			}

			.text {
				color: #fff;
				font-size: 30rpx;
				margin-top: 30rpx;
			}

			.info-content {
				background-color: #fff;
				margin-top: 80rpx;
				padding: 30rpx;
				border-radius: 20rpx;

				.info-item:last-child {
					border-bottom: none;
				}

				.info-item {
					border-bottom: 1px solid #f7f7f7;
					display: flex;
					line-height: 100rpx;
					justify-content: space-between;
					align-items: center;
				}
			}

			.price-block {
				background-color: #fff;
				margin-top: 30rpx;
				padding: 40rpx 30rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price-name {
					font-size: 30rpx;
					color: #767676;
				}

				.price-item {
					display: flex;
					align-items: center;

					.price {
						color: $theme-color;
						font-weight: bold;
						font-size: 38rpx;
					}

					.unit {
						margin-left: 10rpx;
						font-size: 38rpx;
					}

					.iconfont {
						font-size: 34rpx;
						color: #767676;
						margin-left: 10rpx;
					}
				}
			}
		}

		.dialog-title {
			font-size: 32rpx;
			font-weight: bold;
			margin: 40rpx auto;
		}

		.red {
			color: $theme-color;
			margin-right: 6rpx;
			font-weight: bold;
		}

		.weight {
			font-weight: bold;
		}

		.dialog-content {
			margin-bottom: 50rpx;

			.dialog-item {
				display: flex;
				align-items: center;
				margin-bottom: 6rpx;

				.dialog-text {
					font-size: 30rpx;
				}
			}
		}

	}
</style>